<template>
   <view>
      <view class="l-popup" :style="{display: visible ? 'block' : 'none', Transition: 'all .3s'}">
         <view class="l-popup-mask">
            <view class="l-popup-wrap"
            :style="{borderRadius: `${radius} ${radius} 0 0`, height: iHeight, bottom: `-${iHeight}`,
            transform: transform}">
               <view class="l-popup__title" v-if="isCancel">
                  <view class="l-popup__title_cancel" >
                     <text :style="cancelStyle" @click="cancel">{{cancelText}}</text>
                  </view>
                  <view class="l-popup__title_text" >
                     <slot name="title">
                        <text :style="titleStyle">{{title}}</text>
                     </slot>
                  </view>
                  <view class="l-popup__title_confirm">
                     <text v-if="showReset" @click="reset" style="margin-right: 20rpx;color: #909090;">{{resetText}}</text>
                     <text :style="confirmStyle" @click="confirm">{{confirmText}}</text>
                  </view>
               </view>
               <view class="l-popup__content">
                  <slot></slot>
               </view>
            </view>
         </view>
      </view>
   </view>
</template>

<script>
   export default {
      props: {
         open: {
            type: Boolean,
            required: true,
            default: false
         },
         height: {
            type: [String, Number],
            default: '30vh'
         },
         round: {
            type: [String, Number],
            default: 0
         },
         title: {
            type: String,
            default: '标题'
         },
         titleStyle: {
            type: Object,
            default: () => {}
         },
         confirmText: {
            type: String,
            default: '完成'
         },
		 isCancel: {
			 type:Boolean,
			 default: true
		 },
         confirmStyle: {
            type: Object,
            default: () => {}
         },
         cancelText: {
            type: String,
            default: '关闭'
         },
         cancelStyle: {
            type: Object,
            default: () => {}
         },
		 showReset:{
		 	type:Boolean,
		 	default:false
		 },
		 resetText: {
		    type: String,
		    default: '重置'
		 }
      },
      data() {
         return {
            visible: false,
            transform: 'translateY(0)'
         }
      },
      computed: {
         show() {
            return this.open
         },
         iHeight() {
            if(this.height.indexOf('vh') != -1 || this.height.indexOf('vw') != -1
               || this.height.indexOf('%') != -1 || this.height.indexOf('px') != -1) {
               return this.height
            }
            return this.height + 'px'
         },
         radius() {
            if(this.round.indexOf('vh') != -1 || this.round.indexOf('vw') != -1
               || this.round.indexOf('%') != -1 || this.round.indexOf('px') != -1) {
               return this.round
            }
            return this.round + 'px'
         }
      },
      watch: {
         show(val) {
            if(val) {
               this.visible = this.open
               setTimeout(() => {
                  this.transform = `translateY(-${this.iHeight})`
               }, 100)
            }else {
               setTimeout(() => {
                  this.visible = false
               }, 200)
               this.transform = 'translateY(0)'
            }
         }
      },
      mounted() {
         
      },
      methods: {
         confirm() {
            this.$emit("update:open", false)
            this.$emit('confirm')
         },
         cancel() {
            this.$emit("update:open", false)
            this.$emit('cancel')
         },
		 reset(){
		    // this.$emit("update:open", false)
		    this.$emit('reset')
		 }
      }
   }
</script>

<style lang="scss" scoped>
   .l-popup {
      overflow: hidden;
      position: absolute;
      width: 100vw;
      height: 100vh;
	  z-index: 1000;
      top: 0;
      left: 0;
      
      .l-popup-mask {
         position: absolute;
         width: 100vw;
         height: 100vh;
         top: 0;
         left: 0;
         background-color: rgba(0, 0, 0, .5);
         
         .l-popup-wrap {
            position: absolute;
            width: 100%;
            background-color: #fff;
            transition: all .3s;
         }
         
         .l-popup__title {
            display: flex;
            height: 20px;
            padding: 15px 15px 10px;
            font-size: 14px;
            
            view {
               width: 100%;
            }
            
            .l-popup__title_text {
               font-size: 16px;
               font-weight: bold;
               text-align: center;
            }
            
            .l-popup__title_cancel {
               color: #999;
            }
            
            .l-popup__title_confirm {
               color: #0aa679;
               text-align: right;
            }
         }
         
         .l-popup__content {
            width: 90%;
            margin: auto;
            padding-top: 15px;
         }
      }
   }
</style>